<template>
    <div>
        <div>
            <Row>
                <Col span="7">
                    <Card dis-hover style="border-top:4px solid orange;margin-top:20px;line-height: 2.0em">
                        <p slot="title" class="title"><span style="font-size:16px">服务机构信息</span></p>
                        <p class="title"><router-link style="color:black" :to="{name:'personal_exhibition',params:{id: service_detail.member.id} }"><b>{{service_detail.member.enterprise_name}}</b></router-link></p>
                        <p><b>服务机构评分：</b><Rate v-if="service_detail.member.rate" allow-half disabled show-text v-model="service_detail.member.rate"></Rate><span v-if="!service_detail.member.rate">暂无评分</span></p>
                        <p>
                            <b>服务机构认证：</b>
                            <div>
                                <Row style="text-align:center">
                                <Col span="8">
                                <Button :type="service_detail.member.is_mobile_phone_authed?'success':'ghost'" 
                                    size="large" shape="circle" icon="android-phone-portrait"
                                    :title="service_detail.member.is_mobile_phone_authed?'手机已认证':'手机未认证'"></Button>
                                    <p><b v-if="service_detail.member.is_mobile_phone_authed==true" style="font-size:12px">手机已认证</b><b v-if="service_detail.member.is_mobile_phone_authed!=true" style="font-size:12px">手机未认证</b></p>
                                </Col>
                                <Col span="8">
                                <Button :type="service_detail.member.is_email_authed?'success':'ghost'" 
                                    size="large" shape="circle" icon="ios-email"
                                    :title="service_detail.member.is_email_authed?'邮箱已认证':'邮箱未认证'"></Button>
                                    <p><b v-if="service_detail.member.is_email_authed==true" style="font-size:12px">邮箱已认证</b><b v-if="service_detail.member.is_email_authed!=true" style="font-size:12px">邮箱未认证</b></p>
                                </Col>
                                <Col span="8">
                                <Button :type="service_detail.member.status==2?'success':'ghost'" 
                                    size="large" shape="circle" icon="card"
                                    :title="service_detail.member.status==2?'身份已认证':'身份未认证'"></Button>
                                    <p><b v-if="service_detail.member.status==2" style="font-size:12px">身份已认证</b><b v-if="service_detail.member.status!=2" style="font-size:12px">身份未认证</b></p>
                                </Col>
                                </Row>
                            </div>
                        </p>
                        
                        <p><b>所在地区：</b>{{service_detail.member.area.join("")}}</p>
                        <p><b>机构简介：</b>{{formatContent(service_detail.member.enterprise_profile)}}</p>
                        
                    </Card>
                    <!-- <Card dis-hover style="border-top:4px solid orange;margin-top:20px;">
                        <p slot="title" class="title"><span style="font-size:16px">联系我们</span></p>
                        <p><b>联系人：</b>&nbsp;&nbsp;&nbsp;&nbsp;{{service_detail.member.username}}</p>
                        <p><b>联系电话：</b>{{service_detail.member.mobile_phone}}</p>
                    </Card> -->
                </Col>
                <Col span="17" style="line-height: 2.0em;">
                    <Card dis-hover style="border-top:4px solid orange;margin-top:20px;margin-left:20px">
                        <p slot="title" class="title"><span style="font-size:16px">{{service_detail.title}}</span></p>
                        <Row style="margin-top:12px">
                            <Col span="3" ><b>服务类别：</b></Col><Col span="13">{{service_detail.m_type}}</Col>
                            <Col span="3"><b>发布时间：</b></Col><Col>{{service_detail.create_time}}</Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3">
                                <b>服务详情：</b>
                            </Col>
                            <Col>
                                {{service_detail.service_content}}
                            </Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3">
                                <b>服务对象：</b>
                            </Col>
                            <Col>
                                {{service_detail.service_people}}
                            </Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3"><b>服务特色：</b></Col>
                            <Col span="21">{{service_detail.service_feature}}</Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3">
                                <b>申报条件：</b>
                            </Col>
                            <Col>
                                {{service_detail.requirement}}
                            </Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3"><b>需要资料：</b></Col>
                            <Col>{{service_detail.needFileds.join("、")}}</Col>
                        </Row>
                        <Row v-if="service_detail.Remark!=''||service_detail.Remark!='无'" style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3"><b>备注：</b></Col>
                            <Col span="21">{{service_detail.Remark}}</Col>
                        </Row>
                        <Row style="margin-top:10px;border-bottom:2px dash black">
                            <Col span="3">
                                <b>联系人：</b>
                            </Col>
                            <Col span="7">
                                {{service_detail.service_master}}
                            </Col>
                            <Col span="3">
                                <b>联系电话：</b>
                            </Col>
                            <Col span="11">
                                {{service_detail.service_tele}}
                            </Col>
                        </Row>
                        <Row style="margin-top:10px">
                            <Col span="3">
                                <b>服务地区：</b>
                            </Col>
                            <Col span="9">
                                {{service_detail.service_address.split(",").join("")}}
                            </Col>
                            <Col span="3" >
                                <b>浏览次数：</b>
                            </Col>
                            <Col span="3">
                                {{service_detail.view_times}}
                            </Col>
                            <Col span="3" >
                                <b>成交次数：</b>
                            </Col>
                            <Col span="3">
                                {{service_detail.trade_times}}
                            </Col>
                        </Row>
                        <Row style="">
                            <Row style="text-align:center;font-size:1.5em;padding:10px;">服务流程</Row>
                            <Row><StepsEditor mode="preview_list" source-type="service" :source="service_detail"></StepsEditor></Row>
                        </Row>
                        <Row style="margin-top:30px;margin-bottom:20px">
                            <Col span="24" style="text-align:center">
                                <Button type="primary" @click="getService">申请服务</Button>
                            </Col>
                        </Row>
                        <div style="margin-top:10pxborder:1px solid #FFCC7F;background:#FFF2E8">
                            <Row style="border-bottom:1px solid #FFCC7F">
                                <Col span="3"><b>安全提示：</b></Col>
                                <Col span="21">
                                    <p>合作中请尽量使用正规的聊天工具沟通，不要接受&nbsp;<span style="color:orange">可疑文件</span>和不要点击&nbsp;<span style="color:orange">不明来源</span>的链接。 秦皇岛企业网上金融服务平台不会以订单有问题，让您提供任何 &nbsp;<span style="color:orange">银行卡</span>、&nbsp;<span style="color:orange">密码</span>、&nbsp;<span style="color:orange">手机验证码</span>！
                                    遇此情况请举报给秦皇岛企业网上金融服务平台客服中心投诉举报。
                                    </p>
                                    <!-- <p>详细了解交易安全常识： &nbsp;<a href="#">买家防骗</a> &nbsp;<a href="#">卖家防骗</a>&nbsp; <a href="#">交易纠纷</a></p> -->
                                </Col>
                            </Row>
                            <Row>
                                <Col span="3"><b>免责声明：</b></Col>
                                <Col span="21"><p>秦皇岛企业网上金融服务平台所展示的产品供求信息由买卖双方自行提供，其真实性、准确性和合法性由信息发布人负责。秦皇岛企业网上金融服务平台不提供任何保证，并不承担任何法律责任。</p></Col>
                                </Row>
                            </div>
                    </Card>
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="确认与当前服务商对接" >
            <Row>
                <div>
                    <Form ref="bindingForm" :model="form" :rules="rules" >
                        <FormItem prop="title" label="标题：">
                            <Input type="text" v-model="form.title" placeholder="申请服务的原因/用途"></Input>
                        </FormItem>
                        <FormItem prop="demnand_id" label="已发布需求：">
                            <Select v-model="form.demand_id">
                                <Option v-for="item in demand.list" :value="item.id" :key="item.id">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="content" label="内容：">
                            <Input type="text" v-model="form.content" placeholder="详述原因/用途/企业资质等"></Input>
                        </FormItem>
                    </Form>
                </div>
            </Row>
            <div slot="footer">
                <Row>
                    <Col span="22">
                        <Button type="primary" @click="ok" style="margin-left:10px">确认</Button>
                    </Col>
                    <Col span="2">
                        <Button @click="del">取消</Button>
                    </Col>
                </Row>


            </div>
        </Modal>
        <Modal v-model="modal2" @on-ok="Login" @on-cancel="cancel">
            <b><font size="3">请先登录，点击确定跳转到登陆页面</font></b>
        </Modal>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import util from "../../libs/util";
import Service from "@/common/model/Service";
import Demand from "@/common/model/Demand";
import StepsEditor from "@/common/components/StepsEditor"
export default {
    data(){
        return{
            form:{
                title:'',
                demand_id:'',
                content:''
            },
            rules:{
                title:[
                    {required: true, message:'标题不能为空',trigger:'blur'}
                ],
                content:[
                    {required: true, message:'内容不能为空',trigger:'blur'}
                ]
            },
            bindingResult:false,
            modal1:false,
            modal2:false,      
            service_detail: new Service(),
            demand:{
                list:[]
            },
            is_landing:Cookies.get('access') == "member"
        }
    },
    components: {
        StepsEditor
    },
    methods:{
        ok(){
            this.$refs.bindingForm.validate((valid) => {
                if(valid){
                    this.api.post("abutment/bindings",{sponsor: "demander" ,service_member_id: this.service_detail.member.id ,service_id: this.service_detail.id ,demand_id: this.form.demand_id ,title: this.form.title ,description: this.form.content},res=>{
                        this.bindingResult=res.value;
                        if(this.bindingResult==true){
                            this.$CustomMessage.info("已向对方投递请求！");
                            this.modal1=false;
                            window.location.href = util.getRuntimeUrl('member', 'demand_manage/demand_initiated');
                        }else{
                            this.$CustomMessage.error(res.message);
                        }
                    })
                }
            })
        },
        cancel(){

        },
        formatContent(mes){
            if(mes.length>100){
                mes=mes.substring(0,99)+"……";
            }
            return mes;
        },
        Login(){
            this.$router.push({name:"login"});
            //window.location.href=util.getRuntimeUrl('index', 'login');
        },
        getService(){
            if(this.is_landing){
                this.api.post("abutment/is_bindings",{service_id:this.service_detail.id,service_member_id: this.service_detail.member.id},res=>{
                    var r=res.value;
                    if(r==true){
                        this.api.post("demand/page", {status:2},res=>{
                            this.demand.list = Demand.parseList(res.page.list);
                            this.modal1=true;
                        })
                    }else{
                        this.$CustomMessage.info("您已经对接过此项目！");
                        // this.$CustomMessage.info({
                        //     content: res.message,
                        //     duration: 3,
                        //     closable: true
                        // });
                    }
                })
                
                
                
            }else{
                this.modal2 = true;
            }
        },
        connectService(){

        },
        del(){
            this.modal1 = false;
        }
    },
    created(){
        this.is_landing = Cookies.get('access') == "member";
        this.api.post("service/get", {id:this.$route.params.id},res=>{
            this.service_detail.parse(res.data);
        });
        
    }
}
</script>
<style>
    .title{
        text-align:center;
        
    }
</style>




